<template>
  <view class="recommend">
      <view class="content">
        <view class="list">
            <view class="item" v-for="(item,index) in list" :key="index" v-if="index % 2 ===0" >  
              <image :src="item.imagesList[0] || defaultImg" alt="" mode="aspectFill" @click="$gotoUrl('/pages/community/community-item?id='+item.id)"></image>
                <view class="cont">
                    <view class="text">{{item.content}}</view>
                    <view class="user">
                        <view class="lf">
                            <img :src="item.ownerUser.portrait" alt="">
                            <span>{{item.ownerUser.name}}</span>
                        </view>
                        <view class="rg">
                          <img src="/static/liveA.png" alt="" @click="handleRemoveLive(item)" v-if="getShow(item.userLikeStatus)">
                          <img src="/static/live.png" alt="" @click="handleAddLive(item)" v-else>
                            <span>{{getShow(item.likeNum)}}</span> 
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="list">
            <view class="item item2" v-for="(item,index) in list" v-if="index % 2 !==0" :key="index" >
                <image :src="item.imagesList[0] || defaultImg" alt="" mode="aspectFill" @click="$gotoUrl('/pages/community/community-item?id='+item.id)"></image>
                <view class="cont">
                    <view class="text">{{item.content}}</view>
                    <view class="user">
                        <view class="lf">
                            <img :src="item.ownerUser.portrait" alt="">
                            <span>{{item.ownerUser.name}}</span>
                        </view>
                        <view class="rg">
                          <img src="/static/liveA.png" alt="" @click="handleRemoveLive(item)" v-if="getShow(item.userLikeStatus)">
                          <img src="/static/live.png" alt="" @click="handleAddLive(item)" v-else>
                            <span>{{getShow(item.likeNum)}}</span> 
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- <view class="list">
          <view class="item item2" v-for="(item,index) in list" :key="index" >
                <image src="/static/community/1.png" alt="" mode="aspectFill"></image>
                <view class="cont">
                    <view class="text">嘎嘎嘎，冲冲冲！</view>
                    <view class="user">
                        <view class="lf">
                            <img src="/static/community/1.png" alt="">
                            <span>李拍的是个啥</span>
                        </view>
                        <view class="rg">
                            <img src="/static//live.png" alt="" v-if="!item.live">
                            <img src="/static//liveA.png" alt="" v-else>
                            <span>162</span>
                        </view>
                    </view>
                </view>
            </view>
        </view> -->
      </view>
  </view>
</template>
<script>
import { addLive ,removeLive} from '../community-server'
export default {
  props:{
    list:{
      type:Array,
      default:[]
    }
  },
  data() {
    return {
      defaultImg:'/static/community/1.png'
    }
  },
  methods: {
    getShow(val){
      return val
    },
    async handleAddLive(item){
      item.userLikeStatus=1
      item.likeNum+=1
      await addLive({tagId:item.id,tagType:1})
      uni.showToast({title:"点赞成功"})
    },
    async handleRemoveLive(item){
      item.userLikeStatus=0
      item.likeNum-=1
      await removeLive({tagId:item.id,tagType:1})
      uni.showToast({title:"取消点赞"})
    },
  },
}
</script>
<style lang="scss" scoped>
  .recommend{
    padding: 20rpx 30rpx;
   .content{
    display: flex;
      .list{
        width: 50%;
        .item.item2{
          margin-left: 18rpx;
          &>image{
            height: 370rpx;
          }
        }
        .item{
          box-shadow: 0 10rpx 20rpx #999;
          border-radius: 10rpx;
          margin-bottom: 20rpx;
          &>image{
            width: 100%;
            height: 508rpx;
            border-radius: 16rpx;
            margin-bottom: 20rpx;
            object-fit: cover;
          }
          .cont{
            padding: 0 20rpx 20rpx 20rpx;
            .text{
              font-size: 28rpx;
              margin-bottom: 24rpx;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            .user{
              display: flex;
              align-items: center;
              justify-content: space-between;
              .lf{
                display: flex;
                align-items: center;
                img{
                  width: 40rpx;
                  height: 40rpx;
                  border-radius: 50%;
                  margin-right: 10rpx;
                  object-fit: cover;
                }
                font-size: 24rpx;
                font-weight: 400;
              }
              .rg{
                display: flex;
                align-items: center;
                margin-right: 4rpx;
                color: #606266;
                img{
                  width: 40rpx;
                  height: 40rpx;
                }
              }
            }
          }
          
        }
      }
    }
  }
</style>